<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title mb-0">CI项目管理</h4>
        </div>
        <div class="card-body">
          
          <!-- 搜索过滤器 -->
          <form ng-submit="$ctrl.searchCiItems()" class="row mb-3">
            <div class="col-md-2">
              <label class="form-label">CI类型</label>
              <select class="form-control" ng-model="$ctrl.filters.ci_type">
                <option value="">全部类型</option>
                <option ng-repeat="type in $ctrl.ciTypes" value="{{type.value}}">{{type.label}}</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label">环境</label>
              <select class="form-control" ng-model="$ctrl.filters.environment">
                <option value="">全部环境</option>
                <option ng-repeat="env in $ctrl.environments" value="{{env.value}}">{{env.label}}</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label">重要性</label>
              <select class="form-control" ng-model="$ctrl.filters.business_importance">
                <option value="">全部</option>
                <option ng-repeat="imp in $ctrl.businessImportanceOptions" value="{{imp.value}}">{{imp.label}}</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label">状态</label>
              <select class="form-control" ng-model="$ctrl.filters.status">
                <option ng-repeat="status in $ctrl.statusOptions" value="{{status.value}}">{{status.label}}</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label">责任部门</label>
              <select class="form-control" ng-model="$ctrl.filters.owner_department">
                <option value="">全部部门</option>
                <option ng-repeat="dept in $ctrl.departments" value="{{dept}}">{{dept}}</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label">关键字搜索</label>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="搜索CI编号、名称..." ng-model="$ctrl.filters.search">
                <div class="input-group-append">
                  <button type="submit" class="btn btn-primary">
                    <i class="fa fa-search"></i>
                  </button>
                </div>
              </div>
            </div>
          </form>
          
          <div class="row mb-3">
            <div class="col-12">
              <button type="button" class="btn btn-success" ng-click="$ctrl.showCreateCiItemForm()">
                <i class="fa fa-plus"></i> 新建CI项目
              </button>
              <button type="button" class="btn btn-secondary ml-2" ng-click="$ctrl.clearFilters()">
                <i class="fa fa-refresh"></i> 重置筛选
              </button>
            </div>
          </div>

          <!-- 加载提示 -->
          <div ng-if="$ctrl.isLoading" class="text-center py-4">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
            <p class="mt-2">加载中...</p>
          </div>

          <!-- CI项目表格 -->
          <div ng-if="!$ctrl.isLoading" class="table-responsive">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>CI编号</th>
                  <th>CI名称</th>
                  <th>类型</th>
                  <th>环境</th>
                  <th>位置</th>
                  <th>IP地址</th>
                  <th>责任部门</th>
                  <th>业务重要性</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="ciItem in $ctrl.ciItems">
                  <td>
                    <strong>{{ciItem.ci_code}}</strong>
                  </td>
                  <td>{{ciItem.ci_name}}</td>
                  <td>
                    <span class="badge badge-info">{{$ctrl.getCiTypeLabel(ciItem.ci_type)}}</span>
                  </td>
                  <td>{{$ctrl.getEnvironmentLabel(ciItem.environment)}}</td>
                  <td>{{ciItem.location}}</td>
                  <td>{{ciItem.ip_address}}</td>
                  <td>{{ciItem.owner_department}}</td>
                  <td>
                    <span class="badge" ng-class="$ctrl.getBusinessImportanceBadgeClass(ciItem.business_importance)">
                      {{$ctrl.getBusinessImportanceLabel(ciItem.business_importance)}}
                    </span>
                  </td>
                  <td>
                    <span class="badge" ng-class="$ctrl.getStatusBadgeClass(ciItem.status)">
                      {{$ctrl.getStatusLabel(ciItem.status)}}
                    </span>
                  </td>
                  <td>
                    <button class="btn btn-sm btn-primary" title="查看详情">
                      <i class="fa fa-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-warning ml-1" title="编辑">
                      <i class="fa fa-edit"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            
            <div ng-if="$ctrl.ciItems.length === 0" class="text-center py-4">
              <p class="text-muted">暂无CI项目数据</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 新建CI项目模态框 -->
<div class="modal fade" id="createCiItemModal" tabindex="-1" role="dialog" ng-class="{'show': $ctrl.showCreateForm}" style="display: block;" ng-if="$ctrl.showCreateForm">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">新建CI项目</h5>
        <button type="button" class="close" ng-click="$ctrl.hideCreateForm()">
          <span>&times;</span>
        </button>
      </div>
      <form name="ciItemForm" ng-submit="$ctrl.createCiItem()">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label required">CI编号</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.ci_code" required 
                       placeholder="例如：SRV-WEB-01">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label required">CI名称</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.ci_name" required 
                       placeholder="例如：Web前端服务器1">
              </div>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label required">CI类型</label>
                <select class="form-control" ng-model="$ctrl.newCiItem.ci_type" required>
                  <option ng-repeat="type in $ctrl.ciTypes" value="{{type.value}}">{{type.label}}</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">CI分类</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.category" 
                       placeholder="例如：前端服务器">
              </div>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">物理位置</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.location" 
                       placeholder="例如：北京机房A架-1U">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">IP地址</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.ip_address" 
                       placeholder="例如：192.168.1.10">
              </div>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">主机名</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.hostname" 
                       placeholder="例如：web-server-01">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">环境</label>
                <select class="form-control" ng-model="$ctrl.newCiItem.environment">
                  <option ng-repeat="env in $ctrl.environments" value="{{env.value}}">{{env.label}}</option>
                </select>
              </div>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">供应商</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.vendor" 
                       placeholder="例如：戴尔、华为">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">型号/版本</label>
                <input type="text" class="form-control" ng-model="$ctrl.newCiItem.model" 
                       placeholder="例如：PowerEdge R740">
              </div>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">责任部门</label>
                <select class="form-control" ng-model="$ctrl.newCiItem.owner_department">
                  <option value="">请选择</option>
                  <option ng-repeat="dept in $ctrl.departments" value="{{dept}}">{{dept}}</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">业务重要性</label>
                <select class="form-control" ng-model="$ctrl.newCiItem.business_importance">
                  <option ng-repeat="imp in $ctrl.businessImportanceOptions" value="{{imp.value}}">{{imp.label}}</option>
                </select>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">描述</label>
            <textarea class="form-control" rows="3" ng-model="$ctrl.newCiItem.description" 
                      placeholder="请描述此CI项目的用途、特点等"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" ng-click="$ctrl.hideCreateForm()">取消</button>
          <button type="submit" class="btn btn-primary" ng-disabled="$ctrl.isLoading">
            <span ng-if="$ctrl.isLoading"><i class="fa fa-spinner fa-spin"></i> 创建中...</span>
            <span ng-if="!$ctrl.isLoading">创建CI项目</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal-backdrop fade show" ng-if="$ctrl.showCreateForm"></div>

<style>
.required::after {
  content: " *";
  color: red;
}

.modal {
  background: rgba(0,0,0,0.5);
}
</style>